<template>
  <div class="header">
    <div class="bg">
      <div class="search-back" @click="back">
        <em class="iconfont">&#xe7e0;</em>
      </div>
      <h2>确认订单</h2>
    </div>
    <div class="address">
      <h2>收获地址</h2>
      <p class="real-address">北京理工大学国防科技园2号楼10层</p>
      <p class="contact-person">
        瑶妹（先生）瑶妹 18911024266
      </p>
      <div class="search-front" @click="front">
        <em class="iconfont">&#xe615;</em>
      </div>
    </div>
  </div>
  <div class="carts-content">
    <div class="content">
      <div class="title">
        {{ shopName }}
      </div>
      <div class="product-info" v-for="item in productList" :key="item._id">
        <img :src="item.imgUrl" alt="" class="product-pic">
        <div class="product-intro">
          <p class="product-name">{{ item.name }}</p>
          <div class="price-info"><span class="discount-price">￥{{ item.price }} x {{ item.count }}</span></div>
        </div>
        <div class="product-price">
          <span class="unit">￥</span>
          <span class="price">{{ item.price * item.count }}</span>
        </div>
      </div>
      <div class="content-total">
        共计3件/1.4kg
        <em class="iconfont">&#xe6b9;</em>
      </div>
    </div>
  </div>
  <div class="carts-footer">
    <div class="price">实付金额
      <b class="price-number">￥{{ price }}</b>
    </div>
    <div class="submit-order">提交订单</div>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import { computed } from 'vue'

export default {
  name: 'OrderConfirmation',
  setup () {
    const store = useStore()
    const route = useRoute()
    const shopId = route.params.id
    const shopInfo = store.state?.cartList[shopId]
    const shopName = shopInfo.name
    const productList = shopInfo?.productList || []
    const router = useRouter()
    const back = () => {
      router.back()
    }
    const price = computed(() => {
      let price = 0
      if (productList) {
        for (const i in productList) {
          const product = productList[i]
          if (product.checked) {
            price += product.price * product.count
          }
        }
      }
      return price.toFixed(2)
    })
    return {
      shopName,
      productList,
      back,
      price
    }
  }
}
</script>

<style lang="scss" scoped>
.header {

  .bg {
    height: 1.59rem;
    width: 100%;
    background-image: linear-gradient(0deg, rgba(0, 145, 255, 0.00) 4%, #0091FF 50%);
    display: flex;

    .search-back {
      margin-top: .41rem;
      margin-left: .18rem;

      .iconfont {
        color: #FFFFFF;
        font-size: .22rem;
      }
    }

    h2 {
      margin-top: .41rem;
      margin-left: 1.25rem;
      font-size: .16rem;
      color: #FFFFFF;
    }

  }

  .address {
    background: #FFFFFF;
    border-radius: 4px;
    position: fixed;
    left: .18rem;
    right: .18rem;
    top: .85rem;
    height: 1.11rem;
    display: flex;
    flex-direction: column;
    border: .01rem solid white;
    box-sizing: border-box;
    padding-left: .16rem;
    color: #333333;

    h2 {
      font-size: .16rem;
      margin-bottom: .16rem;
      margin-top: .16rem;
    }

    .real-address {
      font-size: .14rem;
      margin: 0 0;
    }

    .contact-person {
      font-size: .12rem;
      color: #666666;
      margin: 0.06rem 0 .16rem 0;
    }

    .search-front {
      position: absolute;
      top: .44rem;
      right: .16rem;

      .iconfont {
        height: .16rem;
        width: .08rem;
        color: #666666;
        font-size: .2rem;

      }
    }
  }
}

.carts-content {
  height: 4.06rem;
  background-color: #F5F5F5;
  padding: .53rem .18rem 0 .18rem;

  .content {
    background-color: #FFFFFF;
    padding: .16rem .16rem .16rem .16rem;

    .title {
      font-size: 16px;
      color: #333333;
      font-weight: bold;
    }

    .product-info {
      display: flex;
      height: .46rem;
      padding: .12rem 0 .16rem 0;
      position: relative;
      z-index: 999;

      .product-pic {
        width: .46rem;
        height: .46rem;
        margin-right: .16rem;
      }

      .product-intro {
        flex: 1;

        .product-name {
          font-size: .14rem;
          color: #333333;
          font-weight: bold;
          margin: 0.06rem 0 .06rem 0;
        }

        .price-info {
          line-height: 20px;

          .discount-price {
            display: inline-block;
            font-size: 14px;
            color: #E93B3B;
          }

          .price {
            margin-left: .06rem;
            display: inline-block;
            font-size: 10px;
            color: #999999;
            text-decoration: line-through;
          }

        }
      }

      .product-price {
        position: absolute;
        right: 0.31rem;
        bottom: 0.24rem;
        color: #000000;

        .unit {
          font-size: .10rem;
          text-align: right;
          line-height: .14rem;
        }

        .price {
          font-size: .14rem;
          text-align: right;
          line-height: .20rem;
        }
      }
    }

    .content-total {
      margin: .16rem .16rem 0 .16rem;
      background-color: #F5F5F5;
      font-size: .14rem;
      color: #999999;
      text-align: center;
      line-height: .28rem;

      .iconfont {
        position: relative;
        color: #999999;
        font-size: .2rem;
        line-height: .28rem;
        top: .04rem;
      }
    }
  }
}

.carts-footer {
  height: .49rem;
  background-color: #FFFFFF;
  color: #333333;
  display: flex;
  justify-content: space-between;

  .price {
    font-size: .14rem;
    color: #333333;
    line-height: .49rem;
    margin-left: .24rem;

    .price-number {
      color: #333333;
      font-size: .16rem;
    }
  }

  .submit-order {
    background-color: #4FB0F9;
    width: .98rem;
    height: .49rem;
    font-size: .14rem;
    color: #FFFFFF;
    text-align: center;
    line-height: .49rem;
  }
}
</style>
